<template>
  <view class="login-container">
    <!-- 深红领口设计 -->
    <view class="collar-collar"></view>
    <view class="collar-notch"></view>

    <!-- 校徽与标题 -->
    <view class="badge-container">
      <image src="/static/logo.jpg" class="university-badge" />
      <view class="ribbon">
        <text class="university-name">宁波大学科学技术学院</text>
      </view>
    </view>

    <!-- 极简表单 -->
    <view class="login-card">
      <view class="input-group">
        <input
            v-model="username"
            placeholder=" "
            class="input-field"
            @focus="activeField = 'username'"
        />
        <label :class="{ 'float-up': username || activeField === 'username' }">账号</label>
        <view class="input-line" :class="{ active: activeField === 'username' }"></view>
      </view>

      <view class="input-group">
        <input
            v-model="password"
            placeholder=" "
            :password="!showPassword"
            class="input-field"
            @focus="activeField = 'password'"
        />
        <label :class="{ 'float-up': password || activeField === 'password' }">密码</label>
        <view class="input-line" :class="{ active: activeField === 'password' }"></view>
<!--        <view class="eye-icon" @click="showPassword = !showPassword">-->
<!--          {{ showPassword ? '隐藏' : '显示' }}-->
<!--        </view>-->
      </view>

      <!-- 领带式登录按钮 -->
      <view class="tie-container">
        <button
            class="login-btn"
            :class="{ 'pulse': isFormValid }"
            @click="handleLogin"
        >
          进入数字巡查平台
        </button>
      </view>
    </view>

    <!-- 动态线条背景 -->
    <view class="line-art"></view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import {loginV2} from "../api/login";
import CryptoJS from "crypto-js";
import {setToken} from "../utils/auth";
import store from "../store";
import {toast} from "uview-plus";

// 表单数据
const username = ref('')
const password = ref('')
const activeField = ref(null)
const showPassword = ref(false)

// 表单验证
const isFormValid = computed(() =>
    username.value.length >= 2 && password.value.length >= 4
)

// 登录处理
const handleLogin = () => {
  console.log('11111')
  console.log(username.value,password.value)
  if (!isFormValid.value){
    uni.showToast({
      title: '用户名/密码格式不正确。',
      icon: 'none'
    })
    return
  }
  console.log('2222')

  uni.showLoading({
    title: '身份验证中...',
    mask: true
  })

  // 模拟登录流程
  setTimeout(() => {
    const para = {
      userName: username.value,
      password: CryptoJS.MD5(password.value).toString()
    }
    loginV2(para).then(res=>{
      if (res.code == 200) {
        setToken(res.data.token)
        store.dispatch('SetUsreInfo', res.data.userInfo)
        toast('登录成功！')
        uni.navigateTo({ url: '/pages/index' })

      }else{
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  }, 1500)
}
</script>

<style lang="scss">
/* 色彩系统 */
$collar-red: #ab0202;    // 深红领口色
$accent-red: #812d3b;    // 强调红色
$pure-white: #FFFFFF;    // 纯白
$light-gray: #f5f7fa;    // 浅灰背景

.login-container {
  height: 100vh;
  background: $light-gray;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 领口设计 */
  .collar-collar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 22vh;
    background: linear-gradient(160deg, $collar-red 0%, darken($collar-red, 15%) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    z-index: 1;
  }

  .collar-notch {
    position: absolute;
    top: 22vh;
    width: 40px;
    height: 20px;
    background: $pure-white;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 2;
  }

  /* 校徽区域 */
  .badge-container {
    position: relative;
    z-index: 3;
    margin-top: 18vh;
    text-align: center;

    .university-badge {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background: $pure-white;
      padding: 12rpx;
      box-shadow: 0 8rpx 30rpx rgba(139, 0, 0, 0.2);
      border: 2rpx solid lighten($collar-red, 10%);
    }

    .ribbon {
      margin-top: 20rpx;
      position: relative;

      &::before, &::after {
        content: "";
        position: absolute;
        height: 2px;
        width: 30%;
        top: 120%;
        background: $accent-red;
      }

      &::before { left: 0; }
      &::after { right: 0; }
    }

    .university-name {
      font-size: 36rpx;
      font-weight: bold;
      color: $collar-red;
      letter-spacing: 1rpx;
      display: inline-block;
      padding: 0 20rpx;
    }
  }

  /* 登录卡片 */
  .login-card {
    position: relative;
    background: $pure-white;
    width: 85%;
    max-width: 600rpx;
    border-radius: 24rpx;
    padding: 60rpx 40rpx;
    margin-top: 60rpx;
    box-shadow: 0 10rpx 40rpx rgba(139, 0, 0, 0.08);
    z-index: 2;

    .input-group {
      position: relative;
      margin-bottom: 70rpx;

      .input-field {
        width: 100%;
        height: 90rpx;
        font-size: 32rpx;
        padding-top: 20rpx;
        background: transparent;
        border: none;
        border-bottom: 1rpx solid #e0e6ed;

        &:focus { outline: none; }
      }

      label {
        position: absolute;
        left: 0;
        top: 30rpx;
        color: #97a3b5;
        font-size: 32rpx;
        transition: all 0.3s ease;

        &.float-up {
          transform: translateY(-40rpx);
          font-size: 28rpx;
          color: $accent-red;
        }
      }

      .input-line {
        position: absolute;
        bottom: 0;
        height: 2rpx;
        width: 0;
        background: $accent-red;
        transition: width 0.4s ease;

        &.active { width: 100%; }
      }

      .eye-icon {
        position: absolute;
        right: 10rpx;
        bottom: 20rpx;
        font-family: 'Material Icons';
        color: #97a3b5;
        font-size: 40rpx;
      }
    }

    /* 领带式按钮容器 */
    .tie-container {
      position: relative;
      margin-top: 80rpx;

      &::before {
        content: "";
        position: absolute;
        top: -40rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 40rpx;
        background: $accent-red;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      }
    }

    .login-btn {
      background: linear-gradient(to bottom, $collar-red, darken($collar-red, 10%));
      color: $pure-white;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 34rpx;
      letter-spacing: 4rpx;
      border-radius: 0 0 50rpx 50rpx;
      position: relative;
      z-index: 2;
      transition: transform 0.3s;

      &:active {
        transform: translateY(6rpx) scale(0.98);
      }

      &.pulse {
        animation: pulse-glow 1.5s infinite;
      }
    }
  }

  /* 动态线条艺术 */
  .line-art {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30vh;
    background:
        linear-gradient(45deg, transparent 65%, rgba($collar-red, 0.08) 65%),
        linear-gradient(-45deg, transparent 70%, rgba($collar-red, 0.06) 70%);
    z-index: 0;
  }
}

/* 动画效果 */
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba($accent-red, 0.8); }
  70% { box-shadow: 0 0 0 20rpx rgba($accent-red, 0); }
  120% { box-shadow: 0 0 0 0 rgba($accent-red, 0); }
}
</style>